<template>
  <div>
    <el-dialog title="提示" v-model="dialogVisible" width="30%" @close='closeDialog'>
      <ggk class="ggk" />
      <input type="text" placeholder="请输入密码" autocomplete='on' autofocus v-model="pass" class="pass">
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="enterPass">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
<script>
import { getCurrentInstance, onMounted, reactive, toRefs } from 'vue';
import { useRouter } from 'vue-router';
import ggk from './fan/group/gua.vue'
export default {
  beforeRouteEnter(to, from, next) {
    next()
  },
  components:{
    ggk
  },
  setup(){
    let {ctx}=getCurrentInstance()
    let router=useRouter()

    let state=reactive({
      dialogVisible:true,
      pass:'',
      visite:false,
      passTime:0
    })
    onMounted(()=>{
        if(sessionStorage.getItem('pass')){
            state.dialogVisible=false
        }
    })
    let enterPass=()=>{
       let pw=123
       if(pw===Number(state.pass)){
         state.dialogVisible=false
         state.visite=true
         sessionStorage.setItem('pass',true)
         ctx.$emit('canShow')
         ctx.$message.success('你进入了个人空间，请注意隐私')
       }else{
         state.passTime++
         if(state.passTime>=3){
           ctx.$message.error(`密码错误3次，请确认你有权限访问，即将返回来源页`)
           state.passTime=0
           router.go(-1)
         }else{
           ctx.$message.error(`密码输入错误请重新输入,你还有${3-state.passTime}次机会`)
         }
         
       }
    }
    let closeDialog=(value)=>{
        if(state.visite){
            return
        }
          ctx.$message('将返回来源页')
          router.go(-1)
    }
    return {
      ...toRefs(state),
      enterPass,closeDialog
    }
  }
};
</script>

<style lang='less' scoped>
.pass{
  display: block;
  margin: 10px auto;
  width: 50%;
  height: 20px;
  font-size: 16px;
  
}
.ggk{
    margin: 10px auto;
  }
</style>